<script lang="ts" setup>
import "mapbox-gl/dist/mapbox-gl.css";

import { onMounted, ref, watch } from "vue";
import Marker from "./components/marker.vue";
import Line from "./components/line.vue";
import Layer from "./components/layer.vue";
import { map, initMap, isLoad, IMarker } from "./store";
import { useMainStore } from "@/store";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
// import {
//   CircleMode,
//   DragCircleMode,
//   DirectMode,
//   SimpleSelectMode,
// } from "mapbox-gl-draw-circle"; // 打包可能会遇到问题
import DrawRectangle from "mapbox-gl-draw-rectangle-mode";
import StaticMode from "@mapbox/mapbox-gl-draw-static-mode";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import CustomDraw from "./customdraw";
import popupDetail from "./components/popup-detail.vue";
import popupDeviceDetail from "./components/device-detail.vue";
let customdraw: CustomDraw;
const store = useMainStore();
onMounted(() => {

  initMap();
  let draw = new MapboxDraw({
    userProperties: true,
    displayControlsDefault: false, // 不显示默认绘制工具条
    modes: {
      ...MapboxDraw.modes,
      // draw_circle: CircleMode, // 打包可能会遇到问题
      // drag_circle: DragCircleMode, // 打包可能会遇到问题
      // direct_select: DirectMode, // 打包可能会遇到问题
      // simple_select: SimpleSelectMode, // 打包可能会遇到问题
      draw_rectangle: DrawRectangle,
      static: StaticMode,
    },
  });
  //@ts-ignore
  window.draw = draw; // 挂载到全局
  //@ts-ignore
  window.map = map;
  map.addControl(draw); // 添加到map对象
  customdraw = new CustomDraw();

  customdraw.clearAll();

  // console.log('sdfds',map.style._layers)
});
const finishDraw = (feature) => {
  console.log(feature);
  customdraw.clearAll();
  // 处理feature，比如显示在页面上
};
watch(
  () => store.fillMode,
  (val) => {
    console.log(val);
    if (val == 1) {
      customdraw.addRectangle(finishDraw);
    } else if (val == 2) {
      customdraw.addCircle(finishDraw);
    } else if (val == 3) {
      customdraw.addPolygon(finishDraw);
    }
    if (val != 0) {
      store.$patch({ fillMode: 0 });
    }
  }
);
interface ILayer {
  id: string;
  name: string;
  type: string;
  visible: boolean;
  children: Array<IMarker>;
}
const resetLoc = () => {
  map.setCenter([115.86, 28.68]);
  map.setPitch(60);
  map.setZoom(13);
};
watch(
  () => store.guidLine,
  () => {
    map.setCenter([
      store.guidLine.content[0].longtitude,
      store.guidLine.content[0].latitude,
    ]);
  },
  {
    deep: true,
  }
);
// const layers = ref<Array<ILayer>>();
</script>
<template>
  <div>
    <div id="map" class="map">
      <div v-if="isLoad">
        <!-- @vue-ignore -->
        <Layer v-for="layer in store.layers" :id="(layer.id as unknown as string)" :visible="(layer.visible as any)"
          :icon="(layer.icon as string)" :popup="layer.name == '人员图层' ? popupDetail : popupDeviceDetail">
          <Marker v-for="marker in layer.children" :data="(marker as IMarker)"></Marker>
        </Layer>
        <Layer :id="'amap-line'" type="LineString">
          <Line :data="store.guidLine"></Line>
        </Layer>
      </div>
    </div>
    <div class="slot">
      <slot></slot>
    </div>
    <div @click="resetLoc" class="reset-button">重置视角</div>
  </div>
</template>

<style lang="scss" scoped>
.map {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
}

.slot {
  position: relative;
  z-index: 10;
}

.reset-button {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1000;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 3px;
  cursor: pointer;
}

.reset-button:hover {
  color: grey;
}

.reset-button:active {
  color: #aaa;
}

// _____________

:deep(.mapboxgl-popup-content) {
  bottom: 20px;
}

:deep(.mapboxgl-popup-close-button) {
  display: none;
}

:deep(.marker div) {
  width: 100px;
  position: relative;
  bottom: 20px;
  // color: red;
}
</style>
